<template>
	<div>
		<div style="padding-left: 120px;padding-top: 100px;">
		<span style="font-size: 28px;color: lightgreen;margin-left: 10px;">个人信息</span>
			<el-form :inline="true" :model="addForm" :rules="addFormRules" ref='addForm'>
				<el-form-item label="姓名" prop="user_name">
					<el-input v-model="addForm.user_name"></el-input>
				</el-form-item>
				<br />
				<el-form-item label="性别：">
					<el-radio-group v-model="addForm.sex">
						<el-radio label="1">男</el-radio>
						<el-radio label="2">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<br />
				<el-form-item label="手机" prop="tel">
					<el-input v-model="addForm.tel"></el-input>
				</el-form-item>
				<br />
				<el-form-item label="地址" prop="address">
					<el-input v-model="addForm.address"></el-input>
				</el-form-item>
				<br />
				<el-form-item>
					<el-button type="primary" @click="updateuser">修改</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="dialogorder = true">修改密码</el-button>
				</el-form-item>
			</el-form>
		</div>
		
		<el-dialog title="修改密码" :visible.sync="dialogorder" >
			<el-form :inline="true" :model="passwordForm" >
				<el-form-item label="旧密码" prop="oldpassword">
					<el-input v-model="passwordForm.oldpassword" type="password"></el-input>
				</el-form-item><br />
				<el-form-item label="新密码" prop="newpassword">
					<el-input v-model="passwordForm.newpassword" type="password"></el-input>
				</el-form-item><br />
				<el-form-item label="确认密码" prop="confirmpassword">
					<el-input v-model="passwordForm.confirmpassword" type="password"></el-input>
				</el-form-item><br />
				<el-form-item>
					<el-button type="primary" @click="updatepassword">修改</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import {updateuser,selectuserbyid} from '../../api/user.js'
	export default {
		data() {
			return {
				addForm:{
					user_id: '',
					user_name: '',
					sex: '',
					tel: '',
					password: '',
					address: ''
				},
				addFormRules:{
					user_name: [
					    { required: true, message: '请输入用户名', trigger: 'change' },
				    ],
				    tel:[
				        { required: true, message: '请输入手机号码', trigger: 'change' },
				    ],
					address:[
					    { required: true, message: '请输入地址', trigger: 'change' },
					],
				    create_time:[
				    	 { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
				    ]
				},
				dialogorder:false,
				passwordForm:{
					'oldpassword':'',
					'newpassword':'',
					'confirmpassword':''
				},
				opassword:''
			};
		},
		methods: {
			updateuser() {
				updateuser(this.addForm).then(() => {
				  this.$notify({
				    title: '成功',
				    message: '更新成功',
				    type: 'success',
				    duration: 2000
				  })
				  this.getuser();
				})
			},
			getuser(){
				selectuserbyid({
					parameter: this.addForm.user_id
				}).then(response => {
					this.addForm.user_name = response[0].user_name;
					this.addForm.sex = response[0].sex;
					this.addForm.tel = response[0].tel;
					this.addForm.password = response[0].password;
					this.addForm.address = response[0].address;
					this.opassword = response[0].password;
				})
			},
			updatepassword(){
				if(this.passwordForm.oldpassword != this.opassword){
					this.$notify({
					  title: '警告',
					  message: '旧密码错误',
					  type: 'info',
					  duration: 2000
					})
					return ;
				}
				if(this.passwordForm.newpassword != this.passwordForm.confirmpassword){
					this.$notify({
					  title: '警告',
					  message: '密码与确认密码不一致',
					  type: 'info',
					  duration: 2000
					})
					return ;
				}
				this.addForm.password = this.passwordForm.confirmpassword;
				updateuser(this.addForm).then(() => {
				  this.$notify({
				    title: '成功',
				    message: '更新成功',
				    type: 'success',
				    duration: 2000
				  })
				  this.dialogorder = false;
				})
			}
		},
		created(){
			var storageuser = JSON.parse(localStorage.getItem("userInfo"));
			this.addForm.user_id = storageuser.user_id;
			this.getuser();
		}
	}
</script>

<style>

</style>
